<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <img src="../动画练习/img//p001.jpg" class="slideleft" id="img1" alt="">
        <img src="../动画练习//img//p002.jpg" class="slidebottom" id="img2" alt="">
        <img src="../动画练习/img/p003.jpg" class="zoomIn" id="img3" alt="">
        <img src="../动画练习//img/p004.jpg" class="rotate" id="img4" alt="">
    </div>
    <div class="bar">
        <a href="#img1">img1</a>
        <a href="#img2">img2</a>
        <a href="#img3">img3</a>
        <a href="#img4">img4</a>
    </div>
</body>

</html>
<style type="text/css">
    img {
        width: 300px;
        height: 300px;
        position: fixed;
        left: 0;
        z-index: 1;
        visibility: hidden;
    }

    .bar {
        position: relative;
        z-index: 100;
    }

    /* 设置了a标签的样式 */
    .bar a {
        display: inline-block;
        border: 1px solid black;
        background-color: #ccc;
    }

    /* 定义动画 */
    @keyframes slideleft {
       from{ left: -300px;}
       to{left:0px}
    }

    @keyframes slidebottom {
       from{ left: 350px;}
       to{left:0px}
    }
    
      @keyframes zoomIn {
       from{ transform: scale(0);}
       to{transform: scale(1);}
    }
    @keyframes rotate{
        from {transform: rotate(0deg) scale(0);}
        to {transform: rotate(360deg) scale(1);}
    }

    div>img:target
            {
                z-index:20;
                visibility:visible;    
            }
    /*使用 target 伪类触发动画*/
    .slideleft:target {
        animation: slideleft 5s;
        -webkit-animation: slideleft 5s;
    }
    .slidebottom:target{
        animation: slidebottom 5s;
        -webkit-animation: slidebottom 5s;
    }
    .zoomIn:target{
        animation: zoomIn 5s;
        -webkit-animation: zoomIn 5s;
    }
    .rotate :target{
        animation: rotate 5s;
        -webkit-animation: rotate 5s;
    }
</style>